<template>
	<view class="tui-addr-box">
		<form :report-submit="true">
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">持卡人</view>
					<input @input="inputAccount" placeholder-class="tui-phcolor" :value="param.bank_account" class="tui-input" name="bank_account" placeholder="请输入姓名" maxlength="25" type="text" />
				</view>
			</tui-list-cell>
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">银行卡号</view>
					<input @input="inputCard" :value="param.bank_card" placeholder-class="tui-phcolor" class="tui-input" name="bank_card" placeholder="请输入卡号" maxlength="25"
					 type="text" />
				</view>
			</tui-list-cell>
			<tui-list-cell :arrow="true" padding="0" @click="showChooseBank">
				<view class="tui-line-cell">
					<view class="tui-title"><text class="tui-title-city-text">银行</text></view>
					<input placeholder-class="tui-phcolor" class="tui-input" :value="bankname" disabled name="bankname" placeholder="请选择银行" maxlength="50" type="text" />
				</view>
			</tui-list-cell>
			
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-line-cell">
					<view class="tui-title">开户行</view>
					<input @input="inputBankName" :value="param.bank_name" placeholder-class="tui-phcolor" class="tui-input" name="bank_name" placeholder="开户行" maxlength="100" type="text" />
				</view>
			</tui-list-cell>
			<!-- 默认地址 -->
			<tui-list-cell :hover="false" padding="0">
				<view class="tui-swipe-cell">
					<view>设为默认</view>
					<switch @change="changeStatus" :checked="param.status>0" color="#3D60F6" class="tui-switch-small" />
				</view>
			</tui-list-cell>
			<!-- 保存地址 -->
			<view class="tui-addr-save" v-show="saveBtnStatus">
				<tui-button shadow type="primary" height="88rpx" shape="circle" @click="save">保存银行信息</tui-button>
			</view>
			<view class="tui-del" v-if="delBtnStatus">
				<tui-button shadow type="gray" height="88rpx" shape="circle" @click="deleteIt">删除银行信息</tui-button>
			</view>
		</form>
		<tui-bottom-popup :show="popup" backgroundColor="transparent" @close="close">
			<view class="tui-header">
				<view>选择银行</view>
				<icon type="clear" :size="16" color="#c0c0c0" class="tui-icon-close" @tap="close"></icon>
			</view>
			<tui-cascade-selection :size="26" :textSize="24" :itemList="banks" :reset="reset"  @complete="chooseCity"></tui-cascade-selection>
		</tui-bottom-popup>
	</view>
</template>

<script>
	const cityData = require('@/common/city.js');
	export default {
		onLoad(option) {
			this.id = option.id;
		},
		onShow:function(){
			this.tui.chkAuth();
			this.getbanks()
			this.getinfo()
		},
		data() {
			return {
				id:0,
				reset:0,
				param:{
					bank_code:'',
					bank_name:'',
					bank:'',
					bank_account:'',
					bank_card:'',
					status:1
					},
				popup:false,
				city:cityData,
				saveBtnStatus:true,
				delBtnStatus:false,
				banks:[],
				bankname:''
			}
		},
		methods: {
			changeStatus:function(event){
				// console.log(event.detail.value);
				this.param.status = event.detail.value?1:0;
			},
			inputAccount:function(event){
				this.param.bank_account = event.detail.value;
			},
			inputCard:function(event){
				this.param.bank_card = event.detail.value;
			},
			inputBankName:function(event){
				this.param.bank_name = event.detail.value;
			},
			showChooseBank(){
				this.popup =true;
			},
			getinfo(){
				if(this.id){
					this.delBtnStatus=true;
					let it =this;
					this.param.id = this.id;
					this.tui.get('member/bank/get/id/'+this.id).then(function(res){
						if(res.code ==1){
							it.param = res.data;
							it.bankname = res.data.bank
						}else{
							uni.navigateBack();
						}
					})
				}
			},getbanks(){
				this.tui.get('member/bank/banks').then(res=>{
					let banks=[];
					for(let i=0;i<res.data.length;i++){
						banks[i]={
							value:res.data[i].bank_code,
							text:res.data[i].bank,
							children:[],
						}
					}
					this.banks = banks;
					// console.log(this.banks)
				})
			},
			chooseCity(e) {
				// this.tui.toast('您选择的数据为：' + e.text);
				// console.log(e);
				this.param.bank_code = e.result[0].value
				this.bankname = e.result[0].text
				this.close();
				setTimeout(() => {
					//重置数据
					this.reset++;
				}, 300);
			},
			close() {
				this.popup = false;
			},
			save(){
				let it =this;
				it.delBtnStatus =false;
				this.saveBtnStatus =0;
				this.tui.post('member/bank/save',this.param).then(function(res){
					// console.log(res);
					if(res.code ==0){
						it.saveBtnStatus =true;
					} 
					it.tui.toast(res.msg);
					
				});
			},
			deleteIt(){
				let it =this;
				this.tui.post('member/bank/del',this.param).then(function(res){
					it.tui.toast(res.msg);
					uni.redirectTo({
						url:'../bank/bank'
					});
				});
			}
		}
	}
</script>

<style>
	.tui-addr-box {
		padding: 20rpx 0;
	}

	.tui-line-cell {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-title {
		width: 180rpx;
		font-size: 28rpx;
	}

	.tui-title-city-text {
		width: 180rpx;
		height: 40rpx;
		display: block;
		line-height: 46rpx;
	}

	.tui-input {
		width: 500rpx;
	}

	.tui-input-city {
		flex: 1;
		height: 40rpx;
		font-size: 28rpx;
		padding-right: 30rpx;
	}

	.tui-phcolor {
		color: #ccc;
		font-size: 28rpx;
	}
	.tui-cell-title{
		font-size: 28rpx;
	}
	.tui-addr-label {
		margin-left: 70rpx;
	}

	.tui-label-item {
		width: 76rpx;
		height: 40rpx;
		border: 1rpx solid rgb(136, 136, 136);
		border-radius: 6rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 40rpx;
		margin-right: 20rpx;
		display: inline-block;
		transform: scale(0.9);
	}
	.tui-label-active{
		background: #E41F19;
		border-color:#E41F19;
		color: #fff;
	}
	.tui-swipe-cell {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		padding: 10rpx 24rpx;
		box-sizing: border-box;
		border-radius: 6rpx;
		overflow: hidden;
		font-size: 28rpx;
	}

	.tui-switch-small {
		transform: scale(0.8);
		transform-origin: 100% center;
	}
	.tui-header {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;
		position: relative;
	}
	.tui-icon-close {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	/* #ifndef H5 */
	.tui-switch-small .wx-switch-input {
		margin: 0 !important;
	}

	/* #endif */

	/* #ifdef H5 */
	>>>uni-switch .uni-switch-input {
		margin-right: 0 !important;
	}

	/* #endif */

	.tui-addr-save {
		padding: 24rpx;
		margin-top: 100rpx;
	}

	.tui-del {
		padding: 24rpx;
	}
</style>
